import { Icon } from "@chakra-ui/icons";
import clsx from "clsx";
export const FileType = {
  js: "js",
  ts: "ts",
  json: "json",
  html: "html",
  css: "css",
  png: "png",
  jpg: "jpg",
  jpeg: "jpeg",
  gif: "gif",
  svg: "svg",
  txt: "txt",
  md: "md",
  pdf: "pdf",
  doc: "doc",
  docx: "docx",
  xls: "xls",
  xlsx: "xlsx",
  ppt: "ppt",
  pptx: "pptx",
  zip: "zip",
  rar: "rar",
  tar: "tar",
  folder: "folder",
  folderOpen: "folderOpen",
  npm: "npm",
  db: "db",
  bucket: "bucket",
  policy: "policy",
  website: "website",
  app: "app",
};

export default function FileTypeIcon(props: {
  type: string;
  className?: string;
  fontSize?: number;
  width?: string;
}) {
  const { type, className, fontSize, width = "18px" } = props;

  switch (type) {
    case FileType.app:
      return (
        <Icon viewBox="0 0 22 22" fontSize={20} className={clsx("align-middle ", className)}>
          <mask
            id="mask0_2744_5395"
            style={{ maskType: "alpha" }}
            maskUnits="userSpaceOnUse"
            x="1"
            y="1"
            width="20"
            height="20"
          >
            <path
              d="M8.25 2.75H3.66667C3.42355 2.75 3.19039 2.84658 3.01849 3.01849C2.84658 3.19039 2.75 3.42355 2.75 3.66667V8.25C2.75 8.49312 2.84658 8.72627 3.01849 8.89818C3.19039 9.07009 3.42355 9.16667 3.66667 9.16667H8.25C8.49312 9.16667 8.72627 9.07009 8.89818 8.89818C9.07009 8.72627 9.16667 8.49312 9.16667 8.25V3.66667C9.16667 3.42355 9.07009 3.19039 8.89818 3.01849C8.72627 2.84658 8.49312 2.75 8.25 2.75ZM8.25 12.8333H3.66667C3.42355 12.8333 3.19039 12.9299 3.01849 13.1018C2.84658 13.2737 2.75 13.5069 2.75 13.75V18.3333C2.75 18.5764 2.84658 18.8096 3.01849 18.9815C3.19039 19.1534 3.42355 19.25 3.66667 19.25H8.25C8.49312 19.25 8.72627 19.1534 8.89818 18.9815C9.07009 18.8096 9.16667 18.5764 9.16667 18.3333V13.75C9.16667 13.5069 9.07009 13.2737 8.89818 13.1018C8.72627 12.9299 8.49312 12.8333 8.25 12.8333ZM18.3333 2.75H13.75C13.5069 2.75 13.2737 2.84658 13.1018 3.01849C12.9299 3.19039 12.8333 3.42355 12.8333 3.66667V8.25C12.8333 8.49312 12.9299 8.72627 13.1018 8.89818C13.2737 9.07009 13.5069 9.16667 13.75 9.16667H18.3333C18.5764 9.16667 18.8096 9.07009 18.9815 8.89818C19.1534 8.72627 19.25 8.49312 19.25 8.25V3.66667C19.25 3.42355 19.1534 3.19039 18.9815 3.01849C18.8096 2.84658 18.5764 2.75 18.3333 2.75ZM18.3333 12.8333H13.75C13.5069 12.8333 13.2737 12.9299 13.1018 13.1018C12.9299 13.2737 12.8333 13.5069 12.8333 13.75V18.3333C12.8333 18.5764 12.9299 18.8096 13.1018 18.9815C13.2737 19.1534 13.5069 19.25 13.75 19.25H18.3333C18.5764 19.25 18.8096 19.1534 18.9815 18.9815C19.1534 18.8096 19.25 18.5764 19.25 18.3333V13.75C19.25 13.5069 19.1534 13.2737 18.9815 13.1018C18.8096 12.9299 18.5764 12.8333 18.3333 12.8333Z"
              fill="white"
              stroke="white"
              strokeWidth="2"
              strokeLinejoin="round"
            />
          </mask>
          <g mask="url(#mask0_2744_5395)">
            <path d="M0 0H22V22H0V0Z" fill="#33BAB1" />
          </g>
        </Icon>
      );

    case FileType.js:
      return (
        <Icon viewBox="0 0 46 46" fontSize={20} className="align-middle">
          <path fill="#ffd600" d="M6,42V6h36v36H6z"></path>
          <path
            fill="#000001"
            d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"
          ></path>
        </Icon>
      );

    case FileType.ts:
      return (
        <Icon viewBox="0 0 11 7" fontSize={fontSize} className="align-middle">
          <path
            d="M0.284091 1.19602V0.181818H5.0625V1.19602H3.28125V6H2.06534V1.19602H0.284091ZM9.00568 1.85511C8.98295 1.62595 8.88542 1.44792 8.71307 1.32102C8.54072 1.19413 8.30682 1.13068 8.01136 1.13068C7.81061 1.13068 7.6411 1.15909 7.50284 1.21591C7.36458 1.27083 7.25852 1.34754 7.18466 1.44602C7.11269 1.54451 7.0767 1.65625 7.0767 1.78125C7.07292 1.88542 7.0947 1.97633 7.14205 2.05398C7.19129 2.13163 7.25852 2.19886 7.34375 2.25568C7.42898 2.31061 7.52746 2.3589 7.6392 2.40057C7.75095 2.44034 7.87027 2.47443 7.99716 2.50284L8.51989 2.62784C8.77367 2.68466 9.00663 2.76042 9.21875 2.85511C9.43087 2.94981 9.61458 3.06629 9.76989 3.20455C9.92519 3.3428 10.0455 3.50568 10.1307 3.69318C10.2178 3.88068 10.2623 4.09564 10.2642 4.33807C10.2623 4.69413 10.1714 5.00284 9.99148 5.2642C9.81345 5.52367 9.55587 5.72538 9.21875 5.86932C8.88352 6.01136 8.47917 6.08239 8.00568 6.08239C7.53598 6.08239 7.12689 6.01042 6.77841 5.86648C6.43182 5.72254 6.16098 5.50947 5.96591 5.22727C5.77273 4.94318 5.6714 4.59186 5.66193 4.1733H6.85227C6.86553 4.36837 6.9214 4.53125 7.01989 4.66193C7.12027 4.79072 7.25379 4.88826 7.42045 4.95455C7.58902 5.01894 7.77936 5.05114 7.99148 5.05114C8.19981 5.05114 8.38068 5.02083 8.53409 4.96023C8.68939 4.89962 8.80966 4.81534 8.89489 4.70739C8.98011 4.59943 9.02273 4.47538 9.02273 4.33523C9.02273 4.20455 8.9839 4.0947 8.90625 4.00568C8.83049 3.91667 8.71875 3.84091 8.57102 3.77841C8.42519 3.71591 8.24621 3.65909 8.03409 3.60795L7.40057 3.44886C6.91004 3.32955 6.52273 3.14299 6.23864 2.8892C5.95455 2.63542 5.81345 2.29356 5.81534 1.86364C5.81345 1.51136 5.9072 1.2036 6.09659 0.940341C6.28788 0.677083 6.55019 0.471591 6.88352 0.323864C7.21686 0.176136 7.59564 0.102273 8.01989 0.102273C8.4517 0.102273 8.8286 0.176136 9.15057 0.323864C9.47443 0.471591 9.72633 0.677083 9.90625 0.940341C10.0862 1.2036 10.179 1.50852 10.1847 1.85511H9.00568Z"
            fill="#36ADEF"
          />
        </Icon>
      );

    case FileType.npm:
      return (
        <Icon viewBox="0 0 16 16" fontSize={fontSize || 22} className="align-middle">
          <rect width="16" height="16" rx="2" fill="#FDEAF1" />
          <path
            d="M2.66667 6.66667V9.33333H4V7.33333H4.66667V9.33333H5.33333V6.66667H2.66667ZM6 6.66667V10H7.33333V9.33333H8.66667V6.66667H6ZM8 7.33333V8.66667H7.33333V7.33333H8ZM9.33333 6.66667V9.33333H10.6667V7.33333H11.3333V9.33333H12V7.33333H12.6667V9.33333H13.3333V6.66667H9.33333ZM2 6H14V10H8V10.6667H5.33333V10H2V6Z"
            fill="#ED598E"
          />
        </Icon>
      );

    case FileType.db:
      return (
        <Icon viewBox="0 0 14 15" fontSize={14} className="align-middle">
          <path d="M13.0727 10.2594C13.1861 10.47 13.1092 10.7321 12.9013 10.8485L12.8949 10.852L7.62227 13.6911C7.433 13.793 7.22159 13.8469 7.00663 13.848C6.79166 13.849 6.57972 13.7973 6.38944 13.6973L6.37775 13.6911L1.10511 10.852C0.892371 10.7374 0.81276 10.4721 0.927317 10.2594C1.04072 10.0487 1.3019 9.96862 1.51354 10.0782L1.51994 10.0816L6.79261 12.9207C6.85529 12.9544 6.92527 12.9724 6.99647 12.973C7.06766 12.9735 7.13792 12.9567 7.20115 12.924L7.20744 12.9207L12.4801 10.0816C12.6928 9.96701 12.9582 10.0466 13.0727 10.2594H13.0727ZM13.0727 7.4156C13.1861 7.62622 13.1092 7.88837 12.9013 8.00474L12.8949 8.00822L7.62227 10.8474C7.433 10.9493 7.22159 11.0031 7.00663 11.0042C6.79166 11.0053 6.57972 10.9536 6.38944 10.8536L6.37775 10.8474L1.10511 8.00822C0.892371 7.89367 0.81276 7.62834 0.927317 7.4156C1.04072 7.20499 1.3019 7.12487 1.51354 7.23444L1.51994 7.23781L6.79261 10.0769C6.85529 10.1107 6.92527 10.1286 6.99647 10.1292C7.06766 10.1298 7.13792 10.113 7.20115 10.0803L7.20744 10.0769L12.4801 7.23781C12.6928 7.12326 12.9582 7.20285 13.0727 7.4156H13.0727ZM7.43682 1.17781L7.44486 1.18232L12.8721 4.26415C12.944 4.305 13.0029 4.36541 13.0419 4.43837C13.1546 4.64934 13.077 4.91126 12.8686 5.02699L12.8623 5.03045L7.42523 7.93624C7.29987 8.00324 7.16007 8.03869 7.01793 8.03952C6.87579 8.04036 6.73558 8.00655 6.60944 7.94103L6.60171 7.93695L1.1413 5.03079C1.0678 4.99167 1.007 4.9324 0.966022 4.85993C0.848279 4.65171 0.919715 4.38802 1.12523 4.26737L1.13149 4.26376L6.58206 1.18153C6.71232 1.10786 6.85929 1.06884 7.00894 1.06818C7.15858 1.06753 7.3059 1.10526 7.4368 1.17778L7.43682 1.17781Z" />
        </Icon>
      );

    case FileType.policy:
      return (
        <Icon viewBox="0 0 14 14" fontSize={14} className="align-middle">
          <path d="M6.41667 0V1.75H7.58333V0H6.41667ZM2.46322 1.63835L1.63835 2.46322L2.87565 3.70052L3.70052 2.87565L2.46322 1.63835ZM11.5368 1.63835L10.2995 2.87565L11.1243 3.70052L12.3617 2.46322L11.5368 1.63835ZM7 2.91667C4.75164 2.91667 2.91667 4.75164 2.91667 7C2.91667 8.61454 3.88274 9.97631 5.25 10.6367V12.25C5.25 12.8876 5.77905 13.4167 6.41667 13.4167H7.58333C8.22095 13.4167 8.75 12.8876 8.75 12.25V10.6367C10.1173 9.97631 11.0833 8.61454 11.0833 7C11.0833 4.75164 9.24836 2.91667 7 2.91667ZM7 4.08333C8.61797 4.08333 9.91667 5.38203 9.91667 7C9.91667 8.2742 9.10311 9.34667 7.97184 9.74691L7.58333 9.88363V12.25H6.41667V9.88363L6.02816 9.74691C4.89689 9.34667 4.08333 8.2742 4.08333 7C4.08333 5.38203 5.38203 4.08333 7 4.08333ZM0 6.41667V7.58333H1.75V6.41667H0ZM12.25 6.41667V7.58333H14V6.41667H12.25ZM2.87565 10.2995L1.63835 11.5368L2.46322 12.3617L3.70052 11.1243L2.87565 10.2995ZM11.1243 10.2995L10.2995 11.1243L11.5368 12.3617L12.3617 11.5368L11.1243 10.2995Z" />
        </Icon>
      );

    case FileType.bucket:
      return (
        <Icon viewBox="0 0 16 16" fontSize={16} className="align-middle">
          <path d="M8 2.5C6.8535 2.5 5.703 2.6485 4.797 2.8905C4.344 3.0115 3.957 3.1385 3.6405 3.328C3.324 3.518 3 3.801 3 4.25C3 4.3615 3.0275 4.4705 3.0625 4.5625C3.1365 4.9435 4.3885 11.4625 4.5155 12.094C4.576 12.3945 4.7675 12.617 4.9845 12.7815C5.201 12.9455 5.4495 13.0685 5.75 13.1715C6.3515 13.379 7.125 13.5 8 13.5C8.875 13.5 9.645 13.379 10.25 13.172C10.5525 13.0685 10.8125 12.949 11.0315 12.781C11.25 12.6135 11.455 12.3925 11.5 12.078C11.51 12.008 11.605 11.4065 11.75 10.6565C11.895 9.9065 12.082 8.9665 12.2655 8.0315C12.6095 6.2715 12.8985 4.76 12.9375 4.5625C12.977 4.46294 12.9981 4.35708 13 4.25C13 3.801 12.676 3.5175 12.3595 3.328C12.043 3.1385 11.656 3.0115 11.203 2.8905C10.297 2.6485 9.1465 2.5 8 2.5ZM8 3.5C9.0625 3.5 10.16 3.633 10.953 3.844C11.3495 3.949 11.66 4.078 11.844 4.1875C11.8945 4.219 11.8985 4.2305 11.922 4.25C11.8985 4.27 11.8945 4.2815 11.8435 4.3125C11.66 4.422 11.3495 4.551 10.9535 4.6565C10.16 4.8665 9.062 5 8 5C6.938 5 5.84 4.867 5.047 4.656C4.6505 4.551 4.34 4.422 4.1565 4.3125C4.1055 4.281 4.1015 4.2695 4.078 4.25C4.1015 4.23 4.1055 4.2185 4.156 4.1875C4.34 4.078 4.6505 3.949 5.047 3.8435C5.84 3.633 6.9375 3.5 8 3.5ZM4.2345 5.4375C4.412 5.5 4.594 5.5545 4.797 5.6095C5.703 5.8515 6.8535 6 8 6C9.1465 6 10.297 5.8515 11.203 5.6095C11.4065 5.5545 11.588 5.5 11.7655 5.4375C11.627 6.1175 11.5195 6.6095 11.2815 7.828C11.164 8.426 11.0725 8.961 10.969 9.5155C10.963 9.5235 10.957 9.5175 10.9065 9.578C10.836 9.662 10.707 9.8045 10.5 9.9375C10.086 10.205 9.338 10.5 8 10.5C6.662 10.5 5.9 10.203 5.4845 9.9375C5.33674 9.8445 5.20489 9.72835 5.094 9.5935L5.015 9.5C4.675 7.746 4.435 6.48 4.234 5.4375H4.2345ZM8 6.5C7.1775 6.5 6.5 7.1775 6.5 8C6.5 8.8225 7.1775 9.5 8 9.5C8.8225 9.5 9.5 8.8225 9.5 8C9.5 7.1775 8.8225 6.5 8 6.5ZM8 7.5C8.2815 7.5 8.5 7.719 8.5 8C8.5 8.2815 8.281 8.5 8 8.5C7.7185 8.5 7.5 8.281 7.5 8C7.5 7.7185 7.719 7.5 8 7.5ZM5.297 10.953C5.8985 11.252 6.756 11.5 8 11.5C9.2285 11.5 10.088 11.2675 10.6875 10.9685C10.6115 11.3475 10.5175 11.797 10.5 11.922C10.49 11.9355 10.463 11.953 10.422 11.9845C10.33 12.0545 10.168 12.156 9.9375 12.2345C9.4765 12.3905 8.783 12.5 8 12.5C7.217 12.5 6.535 12.3925 6.078 12.2345C5.8495 12.156 5.674 12.0585 5.578 11.9845C5.4825 11.91 5.4785 11.875 5.4845 11.906C5.469 11.832 5.3455 11.199 5.297 10.953Z" />
        </Icon>
      );
    case FileType.website:
      return (
        <Icon viewBox="0 0 24 24" fontSize={22} className="align-middle" fill="currentColor">
          <path
            d="M21.4638 13.875L21.25 13.5425C21.1575 13.405 20.3313 12.1912 19.0313 12.075C18.525 12.03 17.76 12.1412 17.0013 12.9275L16.8563 13.0937C16.2438 13.8062 15.785 14.3237 15.3225 14.65C15.3183 14.6531 15.3132 14.6548 15.3079 14.6549C15.3026 14.655 15.2975 14.6533 15.2932 14.6503C15.2889 14.6472 15.2857 14.6429 15.284 14.6379C15.2823 14.6329 15.2822 14.6275 15.2838 14.6225C15.3063 14.5225 15.3238 14.4262 15.3388 14.335L15.405 13.9087L15.1063 13.5962C14.6063 13.075 13.9188 13.18 13.31 13.2725C12.375 13.4125 11.3263 13.5725 10.165 12.375C8.85752 11.0162 7.48502 10.3837 6.08377 10.5C4.00002 10.66 2.71752 12.46 2.66502 12.5375L2.52377 12.7287C2.50799 12.7505 2.49966 12.7768 2.50002 12.8037V18.25C2.50002 18.2831 2.51319 18.3149 2.53664 18.3384C2.56008 18.3618 2.59187 18.375 2.62502 18.375H4.13252C4.14894 18.375 4.16519 18.3718 4.18036 18.3655C4.19553 18.3592 4.20931 18.35 4.22091 18.3384C4.23252 18.3268 4.24173 18.313 4.24801 18.2978C4.25429 18.2827 4.25752 18.2664 4.25752 18.25V13.3937C4.25761 13.3628 4.26919 13.3329 4.29002 13.31C4.61127 12.955 5.31877 12.31 6.23252 12.2387C7.08377 12.175 7.98252 12.63 8.90627 13.59C10.5313 15.2587 12.2063 15.1887 13.255 15.0475C13.2595 15.047 13.2641 15.0477 13.2682 15.0496C13.2723 15.0515 13.2758 15.0544 13.2784 15.0582C13.2809 15.0619 13.2824 15.0662 13.2827 15.0707C13.283 15.0752 13.2821 15.0797 13.28 15.0837C13.0063 15.6637 12.53 16.265 11.715 16.2087C10.5308 16.1265 9.36424 15.8769 8.25002 15.4675C8.2195 15.4555 8.18549 15.456 8.15533 15.4689C8.12517 15.4817 8.10126 15.5059 8.08877 15.5362L7.50252 16.9112C7.49581 16.9266 7.49227 16.9432 7.49211 16.96C7.49195 16.9768 7.49518 16.9935 7.50159 17.009C7.50801 17.0245 7.51749 17.0386 7.52946 17.0503C7.54143 17.0621 7.55565 17.0713 7.57127 17.0775C8.86312 17.5623 10.2185 17.8571 11.595 17.9525C11.6825 17.9525 11.7675 17.9612 11.845 17.9612C12.8963 17.9612 13.6713 17.475 14.22 16.8237C14.2246 16.819 14.2309 16.8163 14.2375 16.8162C16.0363 16.725 17.0788 15.5125 18.1763 14.2337L18.2688 14.1262C18.595 13.7962 18.7975 13.8125 18.8663 13.8187C19.0833 13.8577 19.2836 13.9609 19.4413 14.115C19.4623 14.1328 19.4769 14.157 19.4828 14.1839C19.4887 14.2108 19.4855 14.2388 19.4738 14.2637C18.8288 15.6 16.9538 18.9275 14.045 19.46C12.67 19.47 3.82002 19.71 2.61877 19.7475C2.58562 19.7475 2.55383 19.7607 2.53039 19.7841C2.50694 19.8076 2.49377 19.8393 2.49377 19.8725V21.3725C2.49377 21.3889 2.49701 21.4052 2.50329 21.4203C2.50957 21.4355 2.51878 21.4493 2.53039 21.4609C2.54199 21.4725 2.55577 21.4817 2.57094 21.488C2.5861 21.4943 2.60236 21.4975 2.61877 21.4975C3.82252 21.465 13.0913 21.21 14.1188 21.21H14.1913L14.2625 21.1987C18.925 20.4187 21.23 14.5975 21.3275 14.35L21.47 13.985C21.4775 13.9674 21.4808 13.9483 21.4797 13.9293C21.4786 13.9102 21.4731 13.8916 21.4638 13.875V13.875Z"
            fill="#7B838B"
          />
          <path
            d="M4.46628 6.75H5.96628C5.99943 6.75 6.03122 6.73683 6.05467 6.71339C6.07811 6.68995 6.09128 6.65815 6.09128 6.625V4.625C6.09128 4.52554 6.13079 4.43016 6.20111 4.35983C6.27144 4.28951 6.36682 4.25 6.46628 4.25H17.5375C17.637 4.25 17.7324 4.28951 17.8027 4.35983C17.873 4.43016 17.9125 4.52554 17.9125 4.625V6.0225C17.9125 6.03892 17.9093 6.05517 17.903 6.07034C17.8967 6.0855 17.8875 6.09928 17.8759 6.11089C17.8643 6.1225 17.8505 6.1317 17.8354 6.13799C17.8202 6.14427 17.8039 6.1475 17.7875 6.1475H8.70253C8.68611 6.1475 8.66986 6.15073 8.65469 6.15702C8.63953 6.1633 8.62575 6.1725 8.61414 6.18411C8.60253 6.19572 8.59332 6.2095 8.58704 6.22466C8.58076 6.23983 8.57753 6.25609 8.57753 6.2725V7.7725C8.57753 7.78892 8.58076 7.80517 8.58704 7.82034C8.59332 7.8355 8.60253 7.84928 8.61414 7.86089C8.62575 7.8725 8.63953 7.8817 8.65469 7.88799C8.66986 7.89427 8.68611 7.8975 8.70253 7.8975H17.785C17.8014 7.8975 17.8177 7.90073 17.8329 7.90701C17.848 7.9133 17.8618 7.9225 17.8734 7.93411C17.885 7.94572 17.8942 7.9595 17.9005 7.97466C17.9068 7.98983 17.91 8.00608 17.91 8.0225V9.42C17.91 9.51946 17.8705 9.61484 17.8002 9.68517C17.7299 9.75549 17.6345 9.795 17.535 9.795H10.1863C10.1531 9.795 10.1213 9.80817 10.0979 9.83161C10.0744 9.85505 10.0613 9.88685 10.0613 9.92V11.42C10.0613 11.4364 10.0645 11.4527 10.0708 11.4678C10.0771 11.483 10.0863 11.4968 10.0979 11.5084C10.1095 11.52 10.1233 11.5292 10.1384 11.5355C10.1536 11.5418 10.1699 11.545 10.1863 11.545H18.41C18.5742 11.545 18.7367 11.5127 18.8884 11.4499C19.04 11.387 19.1778 11.295 19.2939 11.1789C19.41 11.0628 19.5021 10.925 19.5649 10.7734C19.6277 10.6217 19.66 10.4592 19.66 10.295V3.75C19.66 3.58585 19.6277 3.4233 19.5649 3.27165C19.5021 3.11999 19.41 2.98219 19.2939 2.86612C19.1778 2.75004 19.04 2.65797 18.8884 2.59515C18.7367 2.53233 18.5742 2.5 18.41 2.5H5.59003C5.42587 2.5 5.26333 2.53233 5.11167 2.59515C4.96002 2.65797 4.82222 2.75004 4.70614 2.86612C4.59007 2.98219 4.498 3.11999 4.43518 3.27165C4.37236 3.4233 4.34003 3.58585 4.34003 3.75V6.625C4.34003 6.64152 4.3433 6.65788 4.34966 6.67313C4.35602 6.68837 4.36534 6.70221 4.37708 6.71383C4.38882 6.72546 4.40275 6.73464 4.41806 6.74085C4.43337 6.74705 4.44976 6.75017 4.46628 6.75Z"
            fill="#7B838B"
          />
        </Icon>
      );
    case FileType.folder:
      return (
        <Icon viewBox="0 0 20 16" width={width} className="align-middle">
          <path
            d="M2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14V2C0 1.45 0.196 0.979333 0.588 0.588C0.979333 0.196 1.45 0 2 0H8L10 2H18C18.55 2 19.021 2.196 19.413 2.588C19.8043 2.97933 20 3.45 20 4V14C20 14.55 19.8043 15.021 19.413 15.413C19.021 15.8043 18.55 16 18 16H2Z"
            fill="#47C8BF"
          />
        </Icon>
      );
    case FileType.folderOpen:
      return (
        <Icon width="4" height="4" marginLeft="-2px" viewBox="0 0 25 24">
          <path
            d="M20 8.25V9H6.4025C5.89631 9.00372 5.40465 9.16962 4.99969 9.47334C4.59473 9.77706 4.2978 10.2026 4.1525 10.6875L2.75 15.375V6C2.75178 5.40381 2.98941 4.83255 3.41098 4.41098C3.83255 3.98941 4.40381 3.75178 5 3.75H10.235C10.3576 3.75134 10.478 3.78199 10.5863 3.8394C10.6946 3.89681 10.7876 3.97931 10.8575 4.08L12.1475 6H17.75C18.3462 6.00178 18.9175 6.2394 19.339 6.66098C19.7606 7.08255 19.9982 7.65381 20 8.25Z"
            fill="#47C8BF"
          />
          <path
            d="M22.1525 13.3126L20.5625 18.6451C20.4245 19.1102 20.1393 19.518 19.7499 19.8074C19.3605 20.0968 18.8877 20.2521 18.4025 20.2501H6.2675C5.91651 20.2508 5.57021 20.1693 5.25631 20.0123C4.94241 19.8552 4.66961 19.6269 4.45971 19.3456C4.24981 19.0643 4.10864 18.7377 4.04749 18.3921C3.98633 18.0465 4.00688 17.6913 4.1075 17.3551L4.25 16.8751L5.6525 12.1876C5.7978 11.7027 6.09473 11.2771 6.49969 10.9734C6.90465 10.6697 7.39632 10.5038 7.9025 10.5001H20.09C20.4263 10.4975 20.7584 10.5743 21.0594 10.7242C21.3604 10.874 21.6218 11.0927 21.8225 11.3626C22.0263 11.6391 22.1623 11.9596 22.2196 12.2983C22.2769 12.637 22.254 12.9844 22.1525 13.3126Z"
            fill="#47C8BF"
          />
        </Icon>
      );
    case FileType.png:
    case FileType.jpg:
    case FileType.jpeg:
    case FileType.gif:
      return (
        <Icon viewBox="0 0 20 18" width="20px" style={{ verticalAlign: "-1px" }}>
          <path
            d="M18 0C18.5304 0 19.0391 0.210714 19.4142 0.585786C19.7893 0.960859 20 1.46957 20 2V16C20 16.5304 19.7893 17.0391 19.4142 17.4142C19.0391 17.7893 18.5304 18 18 18H2C1.46957 18 0.960859 17.7893 0.585786 17.4142C0.210714 17.0391 0 16.5304 0 16V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H18ZM18 2H2V16H2.929L12.237 6.692C12.3531 6.57589 12.4909 6.48379 12.6426 6.42095C12.7942 6.35811 12.9568 6.32577 13.121 6.32577C13.2852 6.32577 13.4478 6.35811 13.5994 6.42095C13.7511 6.48379 13.8889 6.57589 14.005 6.692L18 10.686V2ZM13.121 8.636L5.757 16H18V13.515L13.121 8.636ZM5.5 4C5.89782 4 6.27936 4.15804 6.56066 4.43934C6.84196 4.72064 7 5.10218 7 5.5C7 5.89782 6.84196 6.27936 6.56066 6.56066C6.27936 6.84196 5.89782 7 5.5 7C5.10218 7 4.72064 6.84196 4.43934 6.56066C4.15804 6.27936 4 5.89782 4 5.5C4 5.10218 4.15804 4.72064 4.43934 4.43934C4.72064 4.15804 5.10218 4 5.5 4Z"
            fill="#36ADEF"
          />
        </Icon>
      );
    default:
      return (
        <div className="inline-block w-5 pl-[2px]">
          <Icon viewBox="0 0 16 20" fontSize={15} className="align-middle">
            <path
              d="M10 0H2C0.9 0 0.0100002 0.9 0.0100002 2L0 18C0 19.1 0.89 20 1.99 20H14C15.1 20 16 19.1 16 18V6L10 0ZM2 18V2H9V7H14V18H2Z"
              fill="#B17DDA"
            />
          </Icon>
        </div>
      );
  }
}
